<!DOCTYPE html>
<html style="height: 100%">
<header>
    <meta charset="utf-8">
</header>
 <script src="../lib/ajaxWms.js"></script>
 <style>

       body { font-family: '宋体', 'Lucida sans', Arial;font-size: 16px;background-color:#4d4d4d;color:#eee  ;overflow: hidden;}
	  .slable{width:70%;float:left;text-align:left ;height:25px}
    .svalue{width:25%;float:left;text-align:left ;height:25px;font-weight:bolder}
		.aaa{width:30%;float:left;padding:10px;height:135px; border:1px solid #666}
  </style>
<body style="height: 98%; margin: 0;">
	<div style="border:0px solid #fff;margin:10px">
 <div style="height:250px;width:90%;text-align:center;margin:0 auto">
	<div style="font-size: 50px;"id="detailName">压纹机</div>
	<div class="aaa">
				<div class="slable">设备状态:</div>
				<div class="svalue" style="color:green" id="runStatus"></div>
				<div class="slable">操作人员:</div>
				<div class="svalue" id="user"></div>
				<div class="slable">运行速度(pcs/min):</div>
				<div class="svalue"  id="v"></div>
				<div class="slable">当前产量(kpcs):</div>
				<div class="svalue"  id="cOut" ></div>
	      <div class="slable">设备OEE（%）:</div>
				<div class="svalue" id="oee" ></div>
		
		</div>
	<div class="aaa">
		

				<div class="slable">设备最大产能(kpcs):</div>
				<div class="svalue" style="color:green" id="m"></div>
				<div class="slable">投入产能(kpcs):</div>
				<div class="svalue" id="i"></div>
				<div class="slable">良品实际产能(kpcs):</div>
				<div class="svalue"  id="o"></div>
				<div class="slable">制损不良:</div>
				<div class="svalue" id="eCount"></div>
	      <div class="slable">制损率:</div>
				<div class="svalue" id="ePer"></div>
		
		</div>
	<div class="aaa">
		
				<div class="slable">设备平均运行速度(pcs/min):</div>
				<div class="svalue" style="color:green" id="avg"></div>
				<div class="slable">设备运行时间:</div>
				<div class="svalue" id="runTime"></div>
				<div class="slable">设备停机时间:</div>
				<div class="svalue"id="stopTime"></div>
				<div class="slable">短停次数:</div>
				<div class="svalue" id="stopShortCount"></div>
	      <div class="slable">合计短停时间:</div>
				<div class="svalue" id="stopShortTime"></div>
		
	</div>
</div>
    <div id="container" ></div>
    
    </div>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
    	
    	 	height=parseInt(window.innerHeight-300)
    	
 
        var dom = document.getElementById("container");
        dom.style.height=height+"px"
        var myChart = echarts.init(dom);
        var app = {};
        var option;
     
        var data = [];
      
       
        option = {
            title: {
                text: '当班速度曲线记录',
                 left: 'center',
                 textStyle:{color:"#fff"}
            },
            grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					  },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getHours() + ':' + date.getMinutes()  + ':' + date.getSeconds() + '->' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:700
            },
            series: [{
                name: '数据',
                type: 'line',
                showSymbol: true,
                hoverAnimation: true,
               lineStyle:{color:"#fff"},
                symbol: 'none',
                sampling: 'lttb',
                data: data
            }]
        };

      

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        
          var names=["摆箱机",'制管机',"压纹机","包装机"]
        
       var search= window.location.search.substring(1);
      search=parseInt(search);
        dataBegin=0;
        line=parseInt(search/10);
        lineType=search%10;
           document.getElementById("detailName").innerHTML=line+"线"+names[lineType]
        
       var chart1Requst= {urlBase:"/lm/mx/",
       	perFun:function(){
	       	this.url=this.urlBase+dataBegin+"/"+line+"/"+lineType
	       	return true;
       	},
       	fun:function(d){
       	setTime()
       			updateEchart(d.data.rs)
            
            var sc=d.data.cs
            if(sc.s==1){
            	   document.getElementById("runStatus").innerHTML="空闲"
            }else  if(sc.s==2){
            	   document.getElementById("runStatus").innerHTML="故障"
            }else if(sc.s==3){
            	   document.getElementById("runStatus").innerHTML="运行中"
            }
            
           var userList=d.data.userList
           if(userList.length>0){
           	 document.getElementById("user").innerHTML=userList[0].name
           	}else{
           		 document.getElementById("user").innerHTML=sc.u
           		
           		}
            
             document.getElementById("v").innerHTML=sc.v
     	       document.getElementById("o").innerHTML= (sc.o/1000.0).toFixed(2)
     	          document.getElementById("cOut").innerHTML= (sc.o/1000.0).toFixed(2)
     	       
     	       document.getElementById("i").innerHTML=(sc.i/1000.0).toFixed(2)
     	       
     	       
     	       document.getElementById("m").innerHTML=sc.m
     	       
     	       
     	      var eCount=sc.i-sc.o;
     	       document.getElementById("eCount").innerHTML=eCount
     	       document.getElementById("ePer").innerHTML=(100*eCount/sc.i).toFixed(2)+"%"
     	       var stat=d.data.stat[0]
     	       document.getElementById("runTime").innerHTML=my2sj(stat.runTime)
     	      document.getElementById("avg").innerHTML=(stat.kpiReal/stat.runTime*60).toFixed(1)
              document.getElementById("stopTime").innerHTML=my2sj(stat.stopTime)
              document.getElementById("stopShortCount").innerHTML=stat.stopShortCount
              document.getElementById("stopShortTime").innerHTML=my2sj(stat.stopShortTime)
                document.getElementById("oee").innerHTML=sc.oee
              
        }}
        
         function  getKpiSS(kpiMax,o){
       	
       	 var d=new Date().getTime();
       		     d=d-8*3600*1000;//8点上班
       		     var d1=new Date(d);
       		     d=(d1.getHours()%12)*3600+d1.getMinutes()*60+d1.getSeconds();
       		     
       		     var max=kpiMax*1000/12/60*d/60.0
       		     var v=o*100/max
       		     return v.toFixed(2);
        	}
        
       function  updateEchart( arr){
       			var len  = arr.length
	       		for(var i=0;i<len;i++){
	       			var v=arr[i]
	       			var keyDate=new Date(v.name-8*3600*1000);
	       			data.push({name:keyDate.toString(),value:[keyDate,v.value]});
	       		}
           dataBegin=arr[len-1].name;
       			myChart.setOption({
                series: [{
                    data: data
                }]
            });
       	
       	}
     	this.requestArray.push(chart1Requst);
  function my2sj (data) {
  if(data==0){
    return "";
  }
  if(data<60){
    return data+"秒"
  }
  var m=myInt(data/60);
  if(m<60){
    return m+"分"+(data%60)+"秒"
  }
  var h=myInt(m/60);
  if(h<24){
    return h+"小时"+(m%60)+"分钟"
  }
  var d=myInt(h/24);
  return d+"天"+(h%60)+"小时";
}
function myInt(d){
    return parseInt(d);
}
   	pageIndex=3
    </script>
</body>

</html>
 <script src="foot1.js"></script>